<!-- components/SharePopup.vue -->
<template>
	<uni-popup ref="sharePopup" type="bottom" safeArea backgroundColor="#F3F5F8" borderRadius='10px 10px 10px 10px'>
		<view class="custom-share">
			<!-- 标题区域 -->
			<view class="title-box">
				<view class="share-title">{{ title }}</view>
				<uni-icons type="closeempty" size="28" color="#999999" class="close-icon" @click='close'></uni-icons>
			</view>

			<!-- 分享选项 -->
			<view class="share-list">
				<button class="share-item" open-type="share" @click="handleShare('wechat')">
					<image :src="`${ImgBaseUrl}weixin.png`" class="weixin" />
					<!-- <text class="share-text">微信好友</text> -->
				</button>

				<!-- 可以添加更多分享渠道 -->
				<!-- <view class="share-item" @click="handleShare('wechat-timeline')">
          <image :src="`${ImgBaseUrl}weixin-timeline.png`" class="weixin" />
          <text class="share-text">朋友圈</text>
        </view> -->
			</view>

			<!-- 取消按钮 -->
			<view class="share-cancel" @click="close">取消</view>
		</view>
	</uni-popup>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		ImgBaseUrl
	} from "@/utils/domain.js";

	const props = defineProps({
		// 分享标题
		title: {
			type: String,
			default: '分享到'
		},
		// 分享内容
		shareData: {
			type: Object,
			default: () => ({})
		}
	});

	const emit = defineEmits(['close', 'share']);

	const sharePopup = ref(null);

	// 打开弹窗
	const open = () => {
		sharePopup.value?.open();
	};

	// 关闭弹窗
	const close = () => {
		sharePopup.value?.close();
		emit('close');
	};

	// 处理分享
	const handleShare = async (type) => {
		if (type === 'wechat') {
			// 微信好友分享已经通过 open-type="share" 处理
			// 这里可以添加其他逻辑
			emit('share', type);
			close();
		}
		// 其他分享渠道可以在这里扩展
	};

	// 暴露方法给父组件
	defineExpose({
		open,
		close
	});
</script>

<style lang="scss" scoped>
	.custom-share {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 30rpx 20rpx;
		background: #F3F5F8;
		height: 200rpx;

		.title-box {
			width: 100%;
			display: flex;
			justify-content: center;
			position: relative;
			margin-bottom: 30rpx;

			.share-title {
				font-size: 32rpx;
				font-weight: 500;
				color: #333;
				text-align: center;
			}

			.close-icon {
				position: absolute;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
			}
		}

		.share-list {
			display: flex;
			justify-content: center;
			gap: 60rpx;
		}

		.share-item {
			background: transparent;
			border: none;
			display: flex;
			flex-direction: column;
			align-items: center;
			cursor: pointer;
			padding: 0;
			margin: 0;
			line-height: 1;

			&::after {
				border: none;
			}

			.weixin {
				width: 80rpx;
				height: 80rpx;
				margin-bottom: 10rpx;
			}

			.share-text {
				font-size: 24rpx;
				color: #666;
			}
		}

		.share-cancel {
			font-size: 28rpx;
			color: #999;
			padding: 20rpx 40rpx;
			margin-top: 20rpx;
		}
	}
</style>